<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="queryRoleData" class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="queryRoleData.rolename" placeholder="请输入角色名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showAllRole">查询</el-button>
                    <el-button type="primary" @click="showRoleForm({})">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="roleId"
                            label="编号">
                    </el-table-column>
                    <el-table-column
                            prop="roleName"
                            label="角色名">
                    </el-table-column>
                    <el-table-column
                            prop="roleKey"
                            label="角色权限字符串">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="statusChange(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createBy"
                            label="创建者">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建的时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateBy"
                            label="修改者">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" circle @click="showRoleForm(scope.row)"></el-button>
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" circle @click="delByRoleid(scope.row.roleId)"></el-button>
                            <!-- 分配菜单 -->
                            <el-button type="warning" icon="el-icon-star-off" circle @click="showRoleHasMenuId(scope.row.roleId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 新增角色 -->
                <div>
                    <el-dialog
                            title="新增角色"
                            :visible.sync="addRoleForm"
                            width="30%">
                <span>
                    <el-form label-position="left" label-width="80px" :model="addRoleDate" :rules="rules" ref="roleForm">
                      <!-- 用户id，修改时使用，隐藏 -->
                      <el-input v-model="addRoleDate.roleId" type="hidden"></el-input>
                      <el-form-item label="角色名" prop="roleName">
                        <el-input v-model="addRoleDate.roleName"></el-input>
                      </el-form-item>
                      <el-form-item label="角色权限字符串" prop="roleKey" >
                        <el-input v-model="addRoleDate.roleKey"></el-input>
                      </el-form-item>
                    </el-form>
                </span>
                        <span slot="footer" class="dialog-footer">
                    <el-button @click="addUserForm = false">取 消</el-button>
                    <el-button type="primary" @click="addRole('roleForm')">确 定</el-button>
                </span>
                    </el-dialog>
                </div>

                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 7, 9]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
            <el-dialog
                    title="修改角色的菜单"
                    :visible.sync="showMenu"
                    width="30%">
                <span>
                    <el-tree
                            :data="allMenu"
                            show-checkbox
                            node-key="mid"
                            :default-expanded-keys="roleHasMenu"
                            ref="menuTree"
                            :props="defaultProps">
                    </el-tree>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showMenu = false">取 消</el-button>
                    <el-button type="primary" @click="updateRoleHasMenu">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Users",
        data() {
            return {
                queryRoleData: {
                    rolename:''
                },
                tableData: [],
                addRoleDate: {
                    roleId: '',
                    roleName: '',
                    roleKey: ''
                },
                rules: {
                    roleName: [
                        { required: true, message: '请输入角色名', trigger: 'blur' },
                    ],
                    roleKey: [
                        { required: true, message: '请输入角色权限字符串', trigger: 'blur' },
                    ]
                },
                addRoleForm: false,
                pageSize: 5,
                currentPage: 1,
                total: 0,
                showMenu: false,
                roleid: '',
                allMenu: [],
                roleHasMenu: [],
                defaultProps: {
                    children: 'sonMenu',
                    label: 'mname'
                }
            }
        },
        methods:{
            handleSizeChange(value) {
                this.pageSize = value;
                this.showAllRole()
            },
            handleCurrentChange(value) {
                this.currentPage = value;
                this.showAllRole()
            },
            // 状态改变时触发
            statusChange(row) {
                // 修改用户的状态
                this.$axios({
                    method: 'get',
                    url: 'clms-system/role/updateStatus',
                    params: {
                        roleid: row.roleId,
                        status: row.status
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.$message.success(result.data.message);
                        this.showAllRole()
                    } else {
                        this.$message.error(result.data.message)
                    }
                })
            },
            // 查询全部角色
            showAllRole() {
                this.$axios({
                    method: 'get',
                    url:'clms-system/role/showAllRole',
                    params: {
                        pageno: this.currentPage,
                        pagesize: this.pageSize,
                        rolename: this.queryRoleData.rolename
                    }
                }).then( result => {
                    this.tableData = result.data.listData;
                    this.total = result.data.object.total
                })
            },
            // 弹出新增窗口
            showRoleForm(row) {
                this.addRoleForm = true;
                this.addRoleDate = row;
            },
            // 添加角色
            addRole(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.addRoleDate.roleId == null) {
                            this.$axios({
                                method: 'post',
                                url: 'clms-system/role/addRole',
                                data: this.addRoleDate
                            }).then( result => {
                                if (result.data.code == 200) {
                                    this.$message.success(result.data.message);
                                    this.showAllRole();
                                    this.addRoleForm = false;
                                } else {
                                    this.$message.error(result.data.message)
                                }
                            })
                        } else {
                            this.$axios({
                                method: 'post',
                                url: 'clms-system/role/updateRole',
                                data: this.addRoleDate
                            }).then( result => {
                                if (result.data.code == 200) {
                                    this.$message.success(result.data.message);
                                    this.showAllRole();
                                    this.addRoleForm = false;
                                } else {
                                    this.$message.error(result.data.message)
                                }
                            })
                        }
                    } else {
                        this.$message.error("数据输入有误");
                        return false;
                    }
                });
            },
            // 删除角色
            delByRoleid(roleId) {
                this.$confirm('是否删除此角色?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (roleId == 1) {
                        this.$message.error("当前角色是管理员，无法进行删除")
                    } else {
                        this.$axios({
                            method: 'get',
                            url: 'clms-system/role/delByRoleid',
                            params: {
                                roleid: roleId
                            }
                        }).then( result => {
                            if (result.data.code == 200) {
                                this.$message.success(result.data.message);
                                this.showAllRole();
                            } else {
                                this.$message.error(result.data.message)
                            }
                        })
                    }
                })
            },
            // 查询全部的菜单
            showAllMenu() {
                this.$axios({
                    method: 'get',
                    url:'clms-system/menu/showAllMenu',
                }).then( result => {
                    this.allMenu = result.data.listData;
                })
            },
            // 展示角色拥有的菜单
            showRoleHasMenuId(roleid) {
                this.showMenu = true;
                this.roleid = roleid;
                // 查询当点击角色有的菜单
                this.$axios({
                    method: 'get',
                    url:'clms-system/menu/showRoleHasMenuId',
                    params: {
                        roleid: roleid
                    }
                }).then( result => {
                    this.roleHasMenu = result.data.listData;
                    //默认选中的树的数据
                    this.$refs.menuTree.setCheckedKeys([]);
                    this.roleHasMenu.forEach( value => {
                        this.$refs.menuTree.setChecked(value,true,false)
                    })
                })
            },
            // 修改角色拥有的菜单
            updateRoleHasMenu() {
                this.roleHasMenu=this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys());
                this.$axios({
                    method: 'get',
                    url: 'clms-system/menu/updateRoleHasMenu?menuidList='+this.roleHasMenu,
                    params: {
                        roleid: this.roleid
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.$message.success(result.data.message);
                    } else {
                        this.$message.error(result.data.message)
                    }
                })
            }
        },
        created() {
            this.showAllRole();
            this.showAllMenu()
        }
    }
</script>
